<template>
  <div class="add">
    <a-modal v-model:visible="visible" title="授权人员" @ok="form.onOk">
      <a-transfer show-search v-model:target-keys="targetKeys" v-model:selected-keys="selectedKeys" :data-source="mockData" :one-way="true" :titles="['Source', 'Target']" :render="(item) => item.title" :disabled="disabled" @change="handleChange" @select-change="handleSelectChange" @scroll="handleScroll" />
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { Form, message } from 'ant-design-vue'
  import { computed, reactive, ref, watch } from 'vue'

  import { requestSaveDept } from '/@/api/business/company/dept'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { getCompanyInfo } from '/@/storage'

  const { companyId } = getCompanyInfo()

  interface MockData {
    key: string
    title: string
    description: string
    disabled: boolean
  }
  const mockData: MockData[] = []
  for (let i = 0; i < 20; i++) {
    mockData.push({
      key: i.toString(),
      title: `content${i + 1}`,
      description: `description of content${i + 1}`,
      disabled: i % 3 < 1,
    })
  }
  const disabled = ref<boolean>(false)

  const targetKeys = ref<string[]>([])

  const selectedKeys = ref<string[]>(['1', '4'])

  const handleChange = (nextTargetKeys: string[], direction: string, moveKeys: string[]) => {
    console.log('targetKeys: ', nextTargetKeys)
    console.log('direction: ', direction)
    console.log('moveKeys: ', moveKeys)
  }
  const handleSelectChange = (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => {
    console.log('sourceSelectedKeys: ', sourceSelectedKeys)
    console.log('targetSelectedKeys: ', targetSelectedKeys)
  }
  const handleScroll = (direction: string, e: Event) => {
    console.log('direction:', direction)
    console.log('target:', e.target)
  }
  const props = defineProps({
    visible: { type: Boolean, default: false },
  })

  const emits = defineEmits(['update:visible', 'success'])

  const visible = computed({
    get: () => props.visible,
    set: (val) => emits('update:visible', val),
  })

  watch(
    () => visible.value,
    (newVal, oldVal) => {
      if (newVal && !oldVal) initData()
    },
  )

  /**
   * 初始化数据
   */
  const initData = () => resetFields()

  /** 表单配置 */
  const form = reactive({
    state: {
      check: false,
    },
    rule: {
      name: [{ required: true, message: '请输入组织名称' }],
    },
    onOk: () => {
      validate()
        .then(async () => {
          const { responseCode } = await requestSaveDept({ companyId, deptName: form.state.name, parentId: props.parentDeptId })
          if (responseCode === HttpCodeEnum.SUCCESS) {
            message.success('添加成功')
            visible.value = false
            emits('success')
          }
        })
        .catch(() => {})
    },
  })
  /** 表单hook */
  const { validate, resetFields } = Form.useForm(form.state, form.rule)
  const value3 = ref(['a1', 'b2'])
  const options = [...Array(25)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1) }))
</script>

<style lang="less" scoped></style>
